Skip to main content

Wallet Connect

In this tutorial, we will go through the steps of integrating WalletConnect into your dapp (you can read more about this wallet at: https://walletconnect.com/).

Prerequisites​

The tutorial assumes the user has already started with the basics of useDApp.

See the Getting Started guide if you are a new user.

WalletConnect v1 vs v2​

WalletConnect v1 has been shut down on June 28, 2023. The only official WalletConnect version is now v2.

usedapp provides WalletConnectV2Connector which is compatible with the changes. To use it, install @usedapp/wallet-connect-v2-connector package and add the following config to your dapp: 

connectors: {
    ...
    walletConnectV2: new WalletConnectV2Connector({
      projectId: <YOUR_WALLETCONNECT_PROJECT_ID>,
      chains: [Mainnet],
      rpcMap: {
        1: 'https://mainnet.infura.io/v3/<YOUR_INFURA_KEY>',
      },
    }),
    ...
  },

Now you can connect to WalletConnect v2 by calling activateBrowserWallet with the connector name:

import { useEthers } from '@usedapp/core'

...

const { activateBrowserWallet } = useEthers()

...

const handleConnectWalletConnect = () => {
    activateBrowserWallet({ type: 'walletConnectV2' })
}

Known issues​

Chain ID​

In WalletConnect v2 you must specify the supported chains by your dapp before connecting to the wallet. This can cause issues with some wallets. For instance, Gnosis Safe rejects connection attempts if:

  • the correct chain id is not specified, or
  • if there is more than one chain id specified.

The solution is to set only one chain id in the chains array in the connector config. For instance, if you want to support only Optimsim, you can do the following:

connectors: {
    ...
    walletConnectV2: new WalletConnectV2Connector({
      projectId: <YOUR_WALLETCONNECT_PROJECT_ID>,
      chains: [Optimism],
      rpcMap: {
        1: 'https://optimism.infura.io/v3/<YOUR_INFURA_KEY>',
      },
    }),
    ...
  },

It is possible to create multiple instances of WalletConnectV2Connector, in case your app needs to support Gnosis Safe on multiple chains:

connectors: {
    ...
    walletConnectV2_mainnet: new WalletConnectV2Connector({
      projectId: <YOUR_WALLETCONNECT_PROJECT_ID>,
      chains: [Mainnet],
      rpcMap: {
        1: 'https://optimism.infura.io/v3/<YOUR_INFURA_KEY>',
      },
    }),
    walletConnectV2_optimism: new WalletConnectV2Connector({
      projectId: <YOUR_WALLETCONNECT_PROJECT_ID>,
      chains: [Optimism],
      rpcMap: {
        1: 'https://mainnet.infura.io/v3/<YOUR_INFURA_KEY>',
      },
    }),
    ...
  },